<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">提交方案信息</text>
		</uni-nav-bar>
		<view class="head flex-r ac">
			<text class="text-small color-blue">需添加2场比赛的方案进行审核</text>
		</view>
		<view class="body">
			<view class="card article flex-c">
				<view class="title flex-r ac jsb">
					<text class="text-primary">原创专家方案1</text>
					<view class="flex-r ac" v-if="!article[0]" @tap="goPublish(0)">
						<text class="text-regular color-primary">添加原创方案</text>
						<image class="right-icon" src="@/public/images/apply/yjt_l.png" mode="aspectFit"></image>
					</view>
					<view class="flex-r ac" v-else @tap="editArticle(0)">
						<text class="text-regular color-primary">编辑</text>
						<image class="right-icon" src="@/public/images/apply/yjt_l.png" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="article[0]" class="article-card flex-c">
					<text>{{article[0].title}}</text>
				</view>
			</view>
			<view class="card article flex-c">
				<view class="title flex-r ac jsb">
					<text class="text-primary">原创专家方案2</text>
					<view class="flex-r ac" v-if="!article[1]" @tap="goPublish(1)">
						<text class="text-regular color-primary">添加原创方案</text>
						<image class="right-icon" src="@/public/images/apply/yjt_l.png" mode="aspectFit"></image>
					</view>
					<view class="flex-r ac" v-else @tap="editArticle(1)">
						<text class="text-regular color-primary">编辑</text>
						<image class="right-icon" src="@/public/images/apply/yjt_l.png" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="article[1]" class="article-card">
					<text>{{article[1].title}}</text>
				</view>
			</view>
			<view class="card rules flex-c">
				<view class="title flex-r ac navborder">
					<text class="text-primary">方案须知</text>
				</view>
				<view class="article-rules">
					<text>
						1. 在可选择的比赛中优先选择自己擅长的赛事领域给出分析和预测。
						2. 标题不少于15字，正文在150字以上，方案可以只有基本面的详尽分析，但不可以只有盘赔分析；具有独到的信息、独特的分析视角，或特有风格的方案，视为优秀稿件。
						3. 方案自主原创，不得抄袭。
						4. 文章发布不得包含行业敏感词（盘口盘路水位等）。
						5. 审核过程可能持续1-5个工作日。请注意登录平台查看相关信息。
					</text>
				</view>
			</view>
		</view>
		<view class="foot bottom-ios">
			<view class="submit-box" @tap="submitApply()">
				<button :class="{'active': canSubmit}">提交审核</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expert: null,
				article: [],
				canLeave: false
			};
		},
		computed: {
			canSubmit() {
				return this.expert && this.article.length == 2
			},
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			let expert = uni.getStorageSync('apply_expert')
			if(expert && expert.userId == this.user.userId){
				this.expert = expert.data
			}else{
				this.$Router.replace({name: 'applyexpert'});
			}
		},
		beforeRouteLeave(to, from, next) {
			console.log(to);
			if(to.name == 'userhome'){
				if(this.canLeave){
					next()
				}else{
					uni.showModal({
						title:'退出提示',
						content: '确认要放弃提交方案吗？',
						confirmText: '确认',
						success: (res) => {
							if(res.confirm){
								this.canLeave = true
								uni.removeStorageSync('apply_article_0')
								uni.removeStorageSync('apply_article_1')
								this.$goBack(1)
							}
						}
					})
					next(false)
				}
			}else{
				next()
			}
		},
		methods: {
			//提交申请
			submitApply() {
				if(this.canSubmit){
					this.$http.post({
						url: '/api/applyUgc/add',
						data: {
							articleId: this.article[0].articleId,
							articleOtherId: this.article[1].articleId,
							...this.expert
						}
					}).then((data) => {
						console.log(data);
						if(data.success && data.result){
							this.$ShowToast({text: '提交审核成功'})
							//更新用户数据
							this.$store.dispatch('updateUserinfo');
							//清除本地数据
							uni.removeStorageSync('apply_expert')
							uni.removeStorageSync('apply_article_0')
							uni.removeStorageSync('apply_article_1')
							//进入审核中状态
							this.$Router.replace({name: 'applystatus', params: {isApplyUgc: 1, approvalStatus: 0}})
						}else{
							uni.showToast({
								title: data.message || '提交审核失败，请稍后重试',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
						uni.showToast({
							title: '提交审核失败，请稍后重试',
							icon: 'none'
						})
					})
				}
			},
			//发布方案
			goPublish(index) {
				uni.$once('publish', (data)=>{
					console.log(data);
					if(data != null){
						this.$set(this.article, index, data)
						this.$forceUpdate()
					}
				})
				this.$goByName('applypublish', {index, edit: 0})
			},
			//编辑方案
			editArticle(index) {
				uni.$once('publish', (data)=>{
					console.log(data);
					if(data != null){
						this.$set(this.article, index, data)
						this.$forceUpdate()
					}
				})
				this.$goByName('applypublish', {index, edit: this.article[index].articleId})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 0;
	}
	.head{
		height: 60rpx;
		background: #E5EEFF;
		padding: 0 20rpx;
	}
	.body{
		margin-bottom: calc(120rpx + var(--safe-area-inset-bottom) + var(--vh-offset, 0px));
		.card{
			background: #FFFFFF;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			.title{
				height: 96rpx;
				.text-primary{
					font-weight: 500;
				}
				.right-icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.article{
			.article-card{
				margin-bottom: 30rpx;
				background: #F2F5FA;
				border-radius: 10rpx;
				padding: 20rpx;
				font-size: 26rpx;
				line-height: 40rpx;
				color: #666666;
			}
		}
		.rules{
			.article-rules{
				margin: 30rpx 0;
				font-size: 24rpx;
				line-height: 42rpx;
				color: #666666;
			}
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -1px 0px 0px #EDEDED;
		z-index: 5;
		.submit-box{
			margin: 16rpx 20rpx;
			button{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>
